<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { useMessage } from 'naive-ui'
import { getAll } from '@tauri-apps/api/window'

const colors: string[][] = [
    ['#F9EBEA', '#FDEDEC', '#F5EEF8', '#F4ECF7', '#EAF2F8', '#EBF5FB', '#E8F8F5', '#E8F6F3', '#E9F7EF', '#EAFAF1', '#FEF9E7', '#FEF5E7', '#FDF2E9', '#FBEEE6', '#FDFEFE', '#F8F9F9', '#F4F6F6', '#F2F4F4', '#EBEDEF', '#EAECEE'],
    ['#F2D7D5', '#FADBD8', '#EBDEF0', '#E8DAEF', '#D4E6F1', '#D6EAF8', '#D1F2EB', '#D0ECE7', '#D4EFDF', '#D5F5E3', '#FCF3CF', '#FDEBD0', '#FAE5D3', '#F6DDCC', '#FBFCFC', '#F2F3F4', '#EAEDED', '#E5E8E8', '#D6DBDF', '#D5D8DC'],
    ['#E6B0AA', '#F5B7B1', '#D7BDE2', '#D2B4DE', '#A9CCE3', '#AED6F1', '#A3E4D7', '#A2D9CE', '#A9DFBF', '#ABEBC6', '#F9E79F', '#FAD7A0', '#F5CBA7', '#EDBB99', '#F7F9F9', '#E5E7E9', '#D5DBDB', '#CCD1D1', '#AEB6BF', '#ABB2B9'],
    ['#D98880', '#F1948A', '#C39BD3', '#BB8FCE', '#7FB3D5', '#85C1E9', '#76D7C4', '#73C6B6', '#7DCEA0', '#82E0AA', '#F7DC6F', '#F8C471', '#F0B27A', '#E59866', '#F4F6F7', '#D7DBDD', '#BFC9CA', '#B2BABB', '#85929E', '#808B96'],
    ['#CD6155', '#EC7063', '#AF7AC5', '#A569BD', '#5499C7', '#5DADE2', '#48C9B0', '#45B39D', '#52BE80', '#58D68D', '#F4D03F', '#F5B041', '#EB984E', '#DC7633', '#F0F3F4', '#CACFD2', '#AAB7B8', '#99A3A4', '#5D6D7E', '#566573'],
    ['#C0392B', '#E74C3C', '#9B59B6', '#8E44AD', '#2980B9', '#3498DB', '#1ABC9C', '#16A085', '#27AE60', '#2ECC71', '#F1C40F', '#F39C12', '#E67E22', '#D35400', '#ECF0F1', '#BDC3C7', '#95A5A6', '#7F8C8D', '#34495E', '#2C3E50'],
    ['#A93226', '#CB4335', '#884EA0', '#7D3C98', '#2471A3', '#2E86C1', '#17A589', '#138D75', '#229954', '#28B463', '#D4AC0D', '#D68910', '#CA6F1E', '#BA4A00', '#D0D3D4', '#A6ACAF', '#839192', '#707B7C', '#2E4053', '#273746'],
    ['#922B21', '#B03A2E', '#76448A', '#6C3483', '#1F618D', '#2874A6', '#148F77', '#117A65', '#1E8449', '#239B56', '#B7950B', '#B9770E', '#AF601A', '#A04000', '#B3B6B7', '#909497', '#717D7E', '#616A6B', '#283747', '#212F3D'],
    ['#7B241C', '#943126', '#633974', '#5B2C6F', '#1A5276', '#21618C', '#117864', '#0E6655', '#196F3D', '#1D8348', '#9A7D0A', '#9C640C', '#935116', '#873600', '#979A9A', '#797D7F', '#5F6A6A', '#515A5A', '#212F3C', '#1C2833'],
    ['#641E16', '#78281F', '#512E5F', '#4A235A', '#154360', '#1B4F72', '#0E6251', '#0B5345', '#145A32', '#186A3B', '#7D6608', '#7E5109', '#784212', '#6E2C00', '#7B7D7D', '#626567', '#4D5656', '#424949', '#1B2631', '#17202A'],
]

const state = reactive<{ select: string }>({ select: '#FFFFFF' })

onMounted(async () => {
    window.Message = useMessage()

    // 监听键盘释放事件
    document.onkeydown = async (event: KeyboardEvent) => {
        if ('w' === event.key.toLowerCase() && event.metaKey) {
            event.preventDefault()

            const windows = getAll()
            for (const window of windows) {
                if ('color' === window.label) {
                    await window.close()
                }
            }
        }
    }

    document.onkeyup = async (event: KeyboardEvent) => {
        if (event.key.toLowerCase() === 'r' && event.metaKey) {
            window.location.reload()

            return
        }
    }
})
</script>

<template>
    <n-space :wrap="false" :wrap-item="false" vertical>
        <div class="title" data-tauri-drag-region>Magic Box Color组件</div>
        <n-space :wrap="false" :wrap-item="false" vertical>
            <template v-for="(row, i) in colors" :key="`r${i}`">
                <n-space :data-key="i" :size="30" :wrap="false" :wrap-item="false" justify="space-around">
                    <template v-for="(color, j) in row" :key="`c${j}`">
                        <div :data-key="j" :style="`background-color: ${color}`" class="color-block" @click="state.select = color"></div>
                    </template>
                </n-space>
            </template>
        </n-space>
        <n-space :style="`background-color: ${state.select}`" :wrap="false" :wrap-item="false" align="center" class="color-example" justify="center">
            <div>{{ state.select }}</div>
        </n-space>
    </n-space>
</template>

<style lang="scss" scoped>
.title {
    font-size: 24px;
    line-height: 2;
    cursor: default;
    text-align: center;
}

.color-block {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.color-example {
    width: 100%;
    height: 30px;
    font-family: monospace;
    font-size: 18px;
}
</style>
